<!--
 * @Descripttion: 文件说明
 * @version: 0.0.1
 * @Author: zhangmeng
 * @Date: 2022-01-13 11:06:00
 * @LastEditors: zhangmeng
 * @LastEditTime: 2022-09-02 14:09:57
-->
<template>
  <div>
    <div v-for="(item, index) in data" :key="index">
      <div class="rotation-head">
        <span>第{{ index + 1 }}页轮播</span>
        <i class="el-icon-delete dele-cursor" @click="deleData(index)"></i>
      </div>
      <el-input
        v-model="item.title"
        style="margin-bottom: 6px"
        @change="change"
      ></el-input>
      <div class="img-button-select" :class="item.src==''?'no-img':''">
        <img v-if="item.src != ''" :src="item.src" alt="示例" width="100%" height="100%" />
        <span v-else>选择图片</span>
      </div>
    </div>
    <el-button class="rotation-btn" icon="el-icon-plus" @click="addData"
      >添加
    </el-button>
  </div>
</template>
<script>
export default {
  props: ["value", "type"],
  data() {
    return {
      data: this.value,
    };
  },
  methods: {
    change(data) {
      this.$emit("change", this.data);
    },
    addData() {
      this.data.push({
        title: "",
        src: "",
      });
    },
    deleData(i) {
      this.data.splice(i, 1);
      this.$emit("change", {
        key: this.type,
        value: this.data,
      });
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.rotation-btn {
  width: 100%;
  background-color: #ddd;;
  color: #b8bcbf;
  border: 1px dashed #424242;
  margin-top: 10px;
}

.rotation-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #b8bcbf;
  margin-bottom: 3px;
}

.dele-cursor {
  cursor: pointer;
}
.img-button-select {
  width: 160px;
  height: 60px;
  background-color: #ddd;
  border-radius: 4px;
  font-size: inherit;
  line-height: 60px;
  text-align: center;
  color: #999;
  margin-left: 50%;
  transform: translateX(-50%);
 
}
.no-img{
  border: 1px dashed;
}
</style>
